<div class="bs-example bs-example-tabs" style="margin-top: 20px">
    <ul class="nav nav-tabs">
        <a href="{{source}}" target="_blank" style="float: right;">open example in new tab</a>
        <li ng-class="{active: selectedTab=='example'}"><a ng-click="selectedTab='example'">Example</a></li>
        <li ng-class="{active: selectedTab=='html'}"><a ng-click="selectedTab='html'">Html</a></li>
        <li ng-class="{active: selectedTab=='javascript'}"><a ng-click="selectedTab='javascript'">Javascript</a></li>
    </ul>

    <div class="tab-pane" ng-show="selectedTab=='example'">
        <iframe frameBorder="0" style="width: 820px;" ng-style="iframeStyle" ng-if="source" ng-src="{{source}}"></iframe>
    </div>
    <div class="tab-pane" ng-show="selectedTab=='html'" style="height: 200px; overflow: auto;">
        <pre><code>{{html}}</code></pre>
    </div>
    <div class="tab-pane" ng-show="selectedTab=='javascript'" style="height: 500px; overflow: auto;">
        <pre><code>{{javascript}}</code></pre>
    </div>

</div>